<!DOCTYPE html>
<script src="resources/link-highlight-helper.js"></script>
<link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css">
<style>
#highlightTarget {
  position: absolute;
  height: 200px;
  left: 50px;
  top: 180px;
  width: 20px;
  background-color: red;
}

#clip {
  position: absolute;
  top: 200px;
  left: 0;
  width: 50px;
  height: 150px;
  overflow: hidden;
}

#fakeTarget {
  width: 150px;
  height: 150px;
  background-color: lightblue;
}

</style>

<div id=highlightTarget class=target></div>
<div id=clip>
  <div id=fakeTarget class=target></div>
</div>

<script>
description('This test is successful if the red box is completely covered in a green rectangle with square corners.');
createHighlight(highlightTarget);
</script>
